<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      .grid {
        margin: auto;
        width: 530px;
        text-align: center;
      }

      .grid table {
        border-top: 1px solid #c2d89a;
        width: 100%;
        border-collapse: collapse;
      }

      .grid th,
      td {
        padding: 10;
        border: 1px dashed #f3dcab;
        height: 35px;
        line-height: 35px;
      }

      .grid th {
        background-color: #f3dcab;
      }

      .grid .book {
        padding-bottom: 10px;
        padding-top: 5px;
        background-color: #f3dcab;
      }

      .grid .total {
        height: 30px;
        line-height: 30px;
        background-color: #f3dcab;
        border-top: 1px solid #c2d89a;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="grid">
        <div>
          <h1>图书管理</h1>
          <div class="book">
            <div>
              <label for="id">
                编号：
              </label>
              <input
                type="text"
                id="id"
                v-model="id"
                :disabled="flag" 
                 
              />
              <label for="name">
                名称：
              </label>
              <input type="text" id="name" v-model="name" />
              <button  @click=add>提交</button>
            </div>
          </div>
        </div>
        <div class="total">
          <span>图书总数：</span>
          <span>{{total}}</span>
        </div>
        <table>
          <thead>
            <tr>
              <th>编号</th>
              <th>名称</th>
              <th>时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr :key="item.id" v-for="item in books">
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td>{{item.date|myfilter}}</td>
              <td>
                <a href="" @click.prevent="toEdit(item.id)">修改</a>
                <span>|</span>
                <a href="" @click.prevent="del(item.id)">删除</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <script type="text/javascript" src="vue.js"></script>
    <script>
       const vm=new Vue({
        el:'#app',
        data:{
          books:[
            {id:1,name:"活着",date:'2020-05-20'},
            {id:2,name:"活着1",date:'2020-05-20'},
            {id:3,name:"活着2",date:'2020-05-20'},
            {id:4,name:"活着3",date:'2020-05-20'},
          ],
          id:"",
          name:"",
          flag:false,
          total:""
        },
        methods:{
          add(){
            if(this.flag==true){
              this.books.forEach(item=>{
              if(item.id==this.id){
                 item.name=this.name
              }
            })
            }else{
              this.books.push({
              id:this.id,
              name:this.name,
              date:new Date()
            })
            }
            this.flag=false
            this.id=""
            this.name=""
          },
          toEdit(id){
            this.flag=true
            this.books.forEach(item=>{
              if(item.id==id){
                this.name=item.name
                this.id=item.id
              }
            })
          },
          del(id){
            this.books=this.books.filter(item=>item.id!=id)
          }
          
        },
        filters:{ 
             myfilter(val){
                if(val.length<11){
                  return val
                }else{
                  return val.getFullYear()+"-"+(val.getMonth()+1)+"-"+val.getDate()
                }
              }
            
          }
      })
    </script>
  </body>
</html>
